<template>
  <a-modal
    title="$t('videoCreateForm.pfrw')"
    :width="720"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="$t('videoCreateForm.lx')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-decorator="['type', {rules: [{required: true, message: '{{ $t('videoCreateForm.bnwk') }}'}]}]" @change="handleChangeType" buttonStyle="solid">
            <a-radio-button value="1">{{ $t('videoCreateForm.dy') }}</a-radio-button>
            <a-radio-button value="2">{{ $t('videoCreateForm.hs') }}</a-radio-button>
            <a-radio-button value="3">{{ $t('videoCreateForm.ws') }}</a-radio-button>
            <a-radio-button value="4">{{ $t('videoCreateForm.ks') }}</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="$t('videoCreateForm.mc')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['title', {rules: [{required: true, message: '$t('videoCreateForm.bnwk')'}]}]" />
        </a-form-item>
        <a-form-item
          label="$t('videoCreateForm.xw')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-checkbox-group :options="actionOptions" v-decorator="['action', {rules: [{required: true, message: '{{ $t('videoCreateForm.bnwk') }}'}]}]" />
          <div>
            <a-input v-model="other_action" placeholder="$t('videoCreateForm.qs')" />
          </div>
        </a-form-item>
        <a-form-item
          label="$t('videoCreateForm.zh')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input-search v-model="formData.post_username" placeholder="$t('videoCreateForm.srzhhz')url$t('videoCreateForm.lj')" @search="handleClickParse" size="large">
          <a-button :loading="loadingParse" slot="enterButton">{{ $t('videoCreateForm.dy') }}url{{ $t('videoCreateForm.jx') }}</a-button>
          </a-input-search>
        </a-form-item>
        <a-form-item
          label="$t('videoCreateForm.jdyq')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-decorator="['level', {rules: [{required: true, message: '{{ $t('videoCreateForm.bnwk') }}'}]}]" buttonStyle="solid">
            <a-radio-button :value="item.value" v-for="item in vipOptions">{{item.label}}</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="$t('videoCreateForm.lj')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-model="formData.url" />
        </a-form-item>
        <a-form-item
          label="$t('videoCreateForm.sl')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['cnt', {rules: [{required: true, message: '{{ $t('videoCreateForm.znsrzs') }}'}]}]" />
        </a-form-item>
        <a-form-item
          label="$t('videoCreateForm.mdjl')"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['reward', {rules: [{required: true, message: '{{ $t('videoCreateForm.znsrzs') }}'}]}]" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      vipOptions: [{
        label: this.$t('videoCreateForm.syhy'),
        value: '0'
      }],
      actionOptions: [
        {
          label: this.$t('videoCreateForm.gz'),
          value: this.$t('videoCreateForm.gz')
        },
        {
          label: this.$t('videoCreateForm.dz'),
          value: this.$t('videoCreateForm.dz')
        },
        {
          label: this.$t('videoCreateForm.pl'),
          value: this.$t('videoCreateForm.pl')
        },
        {
          label: this.$t('videoCreateForm.zf'),
          value: this.$t('videoCreateForm.zf')
        },
        {
          label: this.$t('videoCreateForm.sc'),
          value: this.$t('videoCreateForm.sc')
        },
        {
          label: this.$t('videoCreateForm.xz'),
          value: this.$t('videoCreateForm.xz')
        },
        {
          label: this.$t('videoCreateForm.qs'),
          value: this.$t('videoCreateForm.qs')
        }
      ],
      loadingParse: false,
      other_action: '',
      formData: {
        title: '',
        desc: '',
        cnt: '',
        vip_level: '0',
        type: '1',
        reward: '',
        post_username: ''
      }
    }
  },
  methods: {
    add () {
      this.visible = true
    },
    handleSubmit () {
      console.log(this.formData)
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          console.log(values)
          this.formData.cnt = values.cnt
          this.formData.title = values.title
          this.formData.reward = values.reward
          this.formData.type = values.type
          this.formData.vip_level = values.level
          let action_str = values.action.join(',')
          if (action_str === this.$t('videoCreateForm.qs')) {
            this.formData.desc = this.other_action
          } else {
            this.formData.desc = values.action.join(',')
          }
          console.log('values', this.formData)
          setTimeout(() => {
            this.visible = false
            this.confirmLoading = false
            this.$emit('ok', this.formData)
          }, 1500)
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleChangeType (e) {
      this.formData.type = e.target.value
    },
    handleChangeLevel (e) {
      this.formData.vip_level = e.target.value
    },
    handleCancel () {
      this.visible = false
    },
    handleClickParse (value) {
      this.loadingParse = true
      this.$http.post('/task/parse_url_to_account', this.$qs.stringify({
        url: value
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('videoCreateForm.cg'),
            description: res.msg
          })
          this.formData.post_username = res.data
        } else {
          this.$notification.error({
            message: this.$t('videoCreateForm.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('videoCreateForm.sb'),
          description: err.message
        })
      }).then( () => {
        this.loadingParse = false
      } )
    },
    getVipList () {
      this.$http.get('/member/card_list').then(res => {
        this.vipOptions = [{
          label: this.$t('videoCreateForm.syhy'),
          value: '0'
        }]
        for (let i = 0; i < res.length; i++) {
          this.vipOptions.push({
            label: res[i].name,
            value: res[i].level
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('videoCreateForm.sb'),
          description: err.message
        })
      })
    }
  },
  created () {
    this.getVipList()
  }
}
</script>
